<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    
    a{
        text-decoration: none;
    }
    
    .container{
        margin: 50px auto;
        border-top: 1px solid gainsboro;
        border-right: 1px solid gainsboro;
        border-bottom: 1px solid gainsboro;
        border-left: 1px solid gainsboro;
        width: 800px;
        height: 350px;
        
    }
    
      .left,.left2,.left3,.left4,.left5,.left6,.left7,.left8{float: left;position: relative;box-sizing: border-box;width: 200px;height: 300px;border-right: 1px dashed #ddd;
        background: url(https://kaola-haitao.oss.kaolacdn.com/4O1yWA5GGK2deliT06U9x6wSNf_330_542T1811012029_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
      .left2{background: url(https://kaola-haitao.oss.kaolacdn.com/baf3e28a-5f93-4afa-8170-5d0de7595c3fT19010151349_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
      .left3{background: url(https://kaola-haitao.oss.kaolacdn.com/ea4c0ff8-83af-495d-8823-0c96642370bbT2001201852_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
      .left4{background: url(https://kaola-haitao.oss.kaolacdn.com/8afaae29-a31c-4dab-b89d-138b2f70fee4T21011116010_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
      .left5{background: url(https://kaola-haitao.oss.kaolacdn.com/7ShrbiO5blFkRpBisIbCT1811271509_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
      .left6{background: url(https://kaola-haitao.oss.kaolacdn.com/yS4rMviMybWqfgScidc9PCfxd8T1811272039_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
      .left7{background: url(https://kaola-haitao.oss.kaolacdn.com/bea0bb34-ad80-4d9c-8451-15970511d69bT19010111903_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}
      .left8{background: url(https://kaola-haitao.oss.kaolacdn.com/4e33f8d0-6ff3-4053-a4d2-0f6c487438e7T1908091341_330_542.jpg?x-oss-process=image/resize,w_330/quality,q_95) no-repeat;background-size: 100%;}

      .you,.you2,.you3,.you4,.you5,.you6,.you7,.you8{
        float: right;
        position: relative;
        box-sizing: border-box;
        width: 200px;
        height: 300px;
        border-right: 1px dashed #ddd;
        background-size: 100%;
    }
.you2{
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcb*m7dZn2JEQc9kQou8SjhinIyoWqaFsfae4bmVKVPM06ksGnvipnnoL5PVf0geGrpemK0z2f*2eKLsaXykvnbk!/r) no-repeat;background-size: 100%;
}
.you3{
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcblFd7vNUwQCtJV1g2VexxerHm4ncolzmWvbUW3O6tj7SmHx3jLuXjr85ZiWxU55IxmfK7VPmsLirHVugdK6tdY!/r) no-repeat;background-size: 100%;
}
.you4{
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcblFd7vNUwQCtJV1g2VexxcTqfvUhk*KTPgu.lK8Vr4b23KwewpZwlGmg5SUjFWde9TLilIbqUw42AB6mxCqmpY!/r) no-repeat;background-size: 100%;
}
.you5{
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcYv9ERAhE.Ia8OryVN0qzO41n3vSkT7pjNPuHc0LWMXnwtwBlD8GaTBLz6AkAalcK6XLukeea8yd8..pt1oKKqU!/r) no-repeat;background-size: 100%;
}
.you6{ background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcbtO.KUgjssdX*8MOza7gBPYihg7PD5yfygCCl0Lx5fFcI5Kj4B3L5veKOzLeYumv1.MQhfsnX1A6oFRtwVIAZ8!/r) no-repeat;background-size: 100%;
}
.you7{
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcYv9ERAhE.Ia8OryVN0qzO4xocr4tWCli2GHdnzwQ5aJ0h4UHBSiunYAJXS9m3NTdVA0ZXdhl6Vc03AQEKXP9tM!/r) no-repeat;background-size: 100%;
}
.you8{
        background: url(http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcYv9ERAhE.Ia8OryVN0qzO4TAw4BqXXmZk93M3PiJQIBp7vg5V1LqM0KuydLdQhVGb0QfUFFXAJm0CxT9aiA3Yk!/r) no-repeat;background-size: 100%;
}
    
    .left .wrap{
        padding: 40px;
    }
    
     h3{
        font-size: 26px;
        padding-bottom: 20px;
    }
     .a-wrap{
        background: rgb(224, 87, 23);
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        margin-bottom: 20px;
    
    }
    .left-wrap a {
        color:rgb(26, 26, 25);
        padding-bottom: 20px;
    }
    
    .left img{
        position: absolute;
        top:50px;
        right: 35px;
        width: 40%;
    }
    
    .right{
        box-sizing: border-box;
        width: 600px;
        height: 350px;
        float: left;
    }
    .container ul li{
        box-sizing: border-box;
        float: left;
        width: 200px;
        height: 150px; 
    }
    
    ul li:nth-child(1),
    ul li:nth-child(2),
    ul li:nth-child(3){
        border-bottom: 1px dashed #ddd;
    }
    ul li:nth-child(1),
    ul li:nth-child(2),
    ul li:nth-child(4),
    ul li:nth-child(5){
        border-right: 1px dashed #ddd;
    }
    
    .right-li{
        padding: 20px;
        position: relative;
    }
    
    .right-li img{
        position: absolute;
        top:10px;
        right: 10px;
        width: 120px;
        height: 120px;
    }
    
    .right-li img:hover{
        transform:translateX(-10px);
        transition: all .5s ease;
        
    }
    
    .right .a-wrap{
        width: 50px;
        height: 20px;
        line-height: 20px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-bottom: 10px;
    }
    p{
      font-size: 15px;
      color:gray;
    }
    span{
      font-size: 20px;
      color: black;
    }

       ul{
            list-style: none;/* 清除小黑圆点 */
            margin: 0;
            padding: 0;/* 内边距 */
            
        }
        #wrap2{
            width: 60px;
            height: 225px;
            border: 0.5px solid;
            position: fixed;
            z-index: 1000;      
        }
        #head2{
            font-weight: bold;
            width: 60px;
            height: 40px;
            background-color: white;
            line-height: 40px;/* 行高=高度 垂直居中 */
            font-size: 14px;
            color: #000000;/* 文字颜色 白色 */
            text-align: center;/* 文本对齐方式 居中 */
        }
        #list2:hover{
            color: tomato;
            background-color: silver;
        }
        #list2{
            box-sizing: border-box;/* content box css3盒模型 怪异盒 */
            width: 60px;
            padding: 3px;
            margin-top: 0.5px;/* 上边距 */
            margin-bottom: 0.5px;
            background-color: white;
            text-align: center;
            font-size: 12px;
            color: #9A9C9E;
        }




/* 类选择器 */
.imgbox {
    
    /* 避免因窗口变化影响图片效果 */
    width: 100%;
    height: 100%;
    margin: 0 auto;
    float: left;
    background-size: 100%;
   
}

.img {
    width: 60%;
    height: 40%;
    margin: 0 auto;
    display: none;
}

</style>
</head>
<body>
  <div class="wrap" id="wrap2">
    <ul>
        <li class="head" id="head2">热门品牌</li>
        <li class="list" id="list2"><a href="#m1"style="text-decoration: none;">运动户外</a></li>
        <li class="list" id="list2"><a href="#m2"style="text-decoration: none;">美妆专区</a></li>
        <li class="list" id="list2"><a href="#m3"style="text-decoration: none;">个人家清</a></li>
        <li class="list" id="list2"><a href="#m4"style="text-decoration: none;">奢品馆</a></li>
        <li class="list" id="list2"><a href="#m5"style="text-decoration: none;">手表配饰</a></li>
        <li class="list" id="list2"><a href="#m6"style="text-decoration: none;">美食生鲜</a></li>
        <li class="list" id="list2"><a href="#m7"style="text-decoration: none;">服饰鞋靴</a></li>
        <li class="list" id="list2"><a href="#m8"style="text-decoration: none;">家居生活</a></li>
    </ul>
</div>


    <div class="container" id="m1">
        <p><span><b>运动户外</b></span>  热搜词：阿迪达斯 耐克 斯凯奇 安德玛</p>
        <div class="left">
        </div>
        <div class="right">
          <ul>
            <li class="right-li">
                <h3>1</h3>
                <div class="a-wrap">
                  <a href="">3</a>
                </div>
                
              <img src="img/goods/1.1.png" />
            </li>
            <li class="right-li">
              <h3>2</h3>
              <div class="a-wrap">
                <a href="">3</a>
              </div>
              <img src="img/goods/1.2.png" />
            </li>

            <div class="you">
              <hr id="hr1"/>
    <!-- 建立一个div控件作为图片框 -->
             <div class="imgBox">
              <img class="img-slide img" src="http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcdEXtzbKpj4AdNLGmU*f*6ZSutB1z8Jmh.UiXbLDK8.qB8GI36ngabGuSKnLorhSPwlQXPTMHjCXx*ptmbXZVMw!/r" alt="img1">
              <img class="img-slide img" src="http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcfg076q2uQHTTqCx2quzUnF78k44140odn.Qswl2OM4QSFUfHCiENM0gpk1q3Az6hHrvz6ptAv3oBH6Z0uAEmSM!/r" alt="img1">
              <img class="img-slide img" src="http://r.photo.store.qq.com/psc?/V134VWJp01Sn7c/45NBuzDIW489QBoVep5mcdEXtzbKpj4AdNLGmU*f*6Yq6VpT5v9kb*FFmF3vtJZ*HY7YaU3mMjiLr3mLePsdnbD11g6oR7Lyp7WP5QtJ0og!/r" alt="img1">
              </div>
            </div>

            <li class="right-li">
              <h3>3</h3>
              <div class="a-wrap">
                <a href="">4</a>
              </div>
              <img src="img/goods/1.3.png" />
            </li>
            <li class="right-li">
              <h3>4</h3>
              <div class="a-wrap">
                <a href="">5</a>
              </div>
              <img src="img/goods/1.4.png" />
            </li>
            
          </ul>
        </div>
      </div>



      <div class="container" id="m2">
        <p><span><b>美妆专区</b></span> 热搜词：面膜 口红 眼霜 精华 面霜</p>
        <div class="left2"> 
         
        </div>
        <div class="right">
          <ul>
            <li class="right-li">
                <h3>1</h3>
                <div class="a-wrap">
                  <a href="">3</a>
                </div>
              <img src="img/goods/2.1.png" />
            </li>
            <li class="right-li">
              <h3>2</h3>
              <div class="a-wrap">
                <a href="">3</a>
              </div>
              <img src="img/goods/2.2.png" />
            </li>

            <div class="you2">
              
            </div>

            <li class="right-li">
              <h3>3</h3>
              <div class="a-wrap">
                <a href="">4</a>
              </div>
              <img src="img/goods/2.3.png" />
            </li>
            <li class="right-li">
              <h3>4</h3>
              <div class="a-wrap">
                <a href="">5</a>
              </div>
              <img src="img/goods/2.4.png" />
            </li>
          </ul>
        </div>
      </div>


      <div class="container" id="m3">
        <p><span><b>个人家清</b></span> 热搜词：秀发滋养 沐浴清洁 细嫩护手 口腔清新  纸品湿巾</p>
        <div class="left3"> 
        </div>
        <div class="right">
          <ul>
            <li class="right-li">
                <h3>1</h3>
                <div class="a-wrap">
                  <a href="">3</a>
                </div>
              <img src="img/goods/3.1.png" />
            </li>
            <li class="right-li">
              <h3>2</h3>
              <div class="a-wrap">
                <a href="">3</a>
              </div>
              <img src="img/goods/3.2.png" />
            </li>

            <div class="you3">
              </div>

            <li class="right-li">
              <h3>3</h3>
              <div class="a-wrap">
                <a href="">4</a>
              </div>
              <img src="img/goods/3.3.png" />
            </li>
            <li class="right-li">
              <h3>4</h3>
              <div class="a-wrap">
                <a href="">5</a>
              </div>
              <img src="img/goods/3.4.png" />
            </li>
          </ul>
        </div>
      </div>


      <div class="container" id="m4">
        <p><span><b>奢品馆</b></span> 热搜词： GUCCI COACH ML Burberry PRADA FENDI LV DIOR</p>
        <div class="left4"> 
          
        </div>
        <div class="right">
          <ul>
            <li class="right-li">
                <h3>1</h3>
                <div class="a-wrap">
                  <a href="">3</a>
                </div>
              <img src="img/goods/4.1.png" />
            </li>
            <li class="right-li">
              <h3>2</h3>
              <div class="a-wrap">
                <a href="">3</a>
              </div>
              <img src="img/goods/4.2.png" />
            </li>

            <div class="you4">
              </div>
            <li class="right-li">
              <h3>3</h3>
              <div class="a-wrap">
                <a href="">4</a>
              </div>
              <img src="img/goods/4.3.png" />
            </li>
            <li class="right-li">
              <h3>4</h3>
              <div class="a-wrap">
                <a href="">5</a>
              </div>
              <img src="img/goods/4.4.png" />
            </li>
          </ul>
        </div>
      </div>


      <div class="container" id="m5">
        <p><span><b>手表配饰</b></span>  热搜词： DW 施华洛世奇 天梭 浪琴 潘多拉 周大福 APM</p>
        <div class="left5"> 
          
        </div>
        <div class="right">
          <ul>
            <li class="right-li">
                <h3>1</h3>
                <div class="a-wrap">
                  <a href="">3</a>
                </div>
              <img src="img/goods/5.1.png" />
            </li>
            <li class="right-li">
              <h3>2</h3>
              <div class="a-wrap">
                <a href="">3</a>
              </div>
              <img src="img/goods/5.2.png" />
            </li>

            <div class="you4">

              </div>
            <li class="right-li">
              <h3>3</h3>
              <div class="a-wrap">
                <a href="">4</a>
              </div>
              <img src="img/goods/5.3.png" />
            </li>
            <li class="right-li">
              <h3>4</h3>
              <div class="a-wrap">
                <a href="">5</a>
              </div>
              <img src="img/goods/5.4.png" />
            </li>
          </ul>
        </div>
      </div>


      <div class="container" id="m6">
        <p><span><b>美食生鲜</b></span>  热搜词： 巧克力 奶粉 麦片 红酒 零食</p>
        <div class="left6"> 
          
        </div>
        <div class="right">
          <ul>
            <li class="right-li">
                <h3>1</h3>
                <div class="a-wrap">
                  <a href="">3</a>
                </div>
              <img src="img/goods/6.1.png" />
            </li>
            <li class="right-li">
              <h3>2</h3>
              <div class="a-wrap">
                <a href="">3</a>
              </div>
              <img src="img/goods/6.2.png" />
            </li>

            <div class="you5">
              </div>
            <li class="right-li">
              <h3>3</h3>
              <div class="a-wrap">
                <a href="">4</a>
              </div>
              <img src="img/goods/6.3.png" />
            </li>
            <li class="right-li">
              <h3>4</h3>
              <div class="a-wrap">
                <a href="">5</a>
              </div>
              <img src="img/goods/6.4.png" />
            </li>
          </ul>
        </div>
      </div>


      <div class="container" id="m7">
        <p><span><b>服饰鞋靴</b></span>  热搜词： CK TOMMY 阿玛尼 Champion  MO&Co</p>
        <div class="left7"> 
          
        </div>
        <div class="right">
          <ul>
            <li class="right-li">
                <h3>1</h3>
                <div class="a-wrap">
                  <a href="">3</a>
                </div>
              <img src="img/goods/7.1.png" />
            </li>
            <li class="right-li">
              <h3>2</h3>
              <div class="a-wrap">
                <a href="">3</a>
              </div>
              <img src="img/goods/7.2.png" />
            </li>

            <div class="you7">
              </div>
            <li class="right-li">
              <h3>3</h3>
              <div class="a-wrap">
                <a href="">4</a>
              </div>
              <img src="img/goods/7.3.png" />
            </li>
            <li class="right-li">
              <h3>4</h3>
              <div class="a-wrap">
                <a href="">5</a>
              </div>
              <img src="img/goods/7.4.png" />
            </li>
          </ul>
        </div>
      </div>


      <div class="container" id="m8">
        <p><span><b>家具生活</b></span>  热搜词：碧然德  FUMAKILLA 蕉下</p>
        <div class="left8"> 
          
        </div>
        <div class="right">
          <ul>
            <li class="right-li">
                <h3>1</h3>
                <div class="a-wrap">
                  <a href="">3</a>
                </div>
              <img src="img/goods/8.1.png" />
            </li>
            <li class="right-li">
              <h3>2</h3>
              <div class="a-wrap">
                <a href="">3</a>
              </div>
              <img src="img/goods/8.2.png" />
            </li>

            <div class="you8">
              </div>
            <li class="right-li">
              <h3>3</h3>
              <div class="a-wrap">
                <a href="">4</a>
              </div>
              <img src="img/goods/8.3.png" />
            </li>
            <li class="right-li">
              <h3>4</h3>
              <div class="a-wrap">
                <a href="">5</a>
              </div>
              <img src="img/goods/8.4.png" />
            </li>
          </ul>
        </div>
      </div>

</body>
<script type="text/javascript">
  var index = 0, len;
  // 类似获取一个元素数组
  var imgBox = document.getElementsByClassName("img-slide");
  len = imgBox.length;
  imgBox[index].style.display = 'block';
  // 逻辑控制函数
  function slideShow() {
      index ++;
      // 防止数组溢出
      if(index >= len) index = 0;
      // 遍历每一个元素
      for(var i=0; i<len; i++) {
          imgBox[i].style.display = 'none';
      }
      // 每次只有一张图片显示
      imgBox[index].style.display = 'block';
  }
  // 定时器，间隔2s切换图片
  setInterval(slideShow, 2000);
</script>
</html>